<template>
  <div>
    这是demo组件<br>
    <p id="pp">{{msg}}</p>
<button @click="msg = HELLO">点我改msg</button>
  </div>
</template>

<script>
export default {
  name: 'DemoDemo',

  data() {
    return {
      msg:'你好世界'
    };
  },
  //初始化阶段
//数据初始化
 beforeCreate(){
  console.log(' beforeCreate',this.msg);
 },
 created(){
  //发请求就在这里
  console.log('created',this.msg);
 },
 //DOM渲染
 beforeMount(){
  const p = document.querySelector('#pp')
  console.log('beforeMount',p);
 },
 mounted(){
  const p = document.querySelector('#pp')
    console.log('mounted', p)
 },
 //运行阶段
 beforeUpdate(){
     const p = document.querySelector('#pp')
    // 数据变化后, DOM 更新前
    console.log('beforeUpdate', p.innerHTML)
 },
 updated(){
   const p = document.querySelector('#pp')
    // 数据变化后, DOM 更新后
    console.log('updated', p.innerHTML)
 },
 //销毁阶段
 beforeDestroy(){
  console.log('beforeDestro');
 },
 destroyed(){
  console.log('destroyed');
 },
   methods: {
    // 生命周期钩子会自动执行, 不要写到 methods 里面, 语法层面不报错, 但不会自动执行

  }
};
</script>

<style lang="scss" scoped>

</style>